/* pages/cateSec/cateSec.wxss */
.cateSecContainer{
    height: 100vh;
    width: 100vw;
    .searchbar{
        height: 80rpx;
        width: 100%;
        .searchPart{
            position: relative;
            width: 100%;
            height: 100%;
            background: rgba(200, 200, 200, 0.2);
            padding: 10rpx 20rpx;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            .inputClass{
                height: 60rpx;
                width: 100%;
                border-radius: 50rpx;
                padding-left: 50rpx;
                font: 24rpx 'microsoft yahei';
                color: rgba(0, 0, 0, 0.5);
                background: white;
            }
            .placeholdstyle{
                font: 24rpx 'microsoft yahei';
                color: rgba(200, 200, 200, 0.6);
            }
            .iconclass{
                position: fixed;
                right: 40rpx;
            }
        }

    }
    .secBarContainer{
        width: 100vw;
        .secBarBox:not(:nth-child(5n)){
            margin-right: calc(5%/4);
        }
        .secBarBox{
            height: 100%;
            width: 100%;
            padding: 10rpx 20rpx;
            box-sizing: border-box;
            display: grid;
            background: rgba(200, 200, 200, 0.2);
            justify-content: space-between;
            grid-template-columns: repeat(auto-fill,110rpx);
            // grid-row-gap: 2rpx;
            .secPart{
                width: 110rpx;
                height: 110rpx;
                background: chocolate;
                display: flex;
                margin: 6rpx 0;
                justify-content: center;
                flex-direction: column;
                .secimage{
                    height: 80rpx;
                    width: 100%;
                }
                .secName{
                    height: 40rpx;
                    font: 18rpx "microsoft yahei";
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
    
        }
  
    }
    .swaperBox{
        height: 300rpx;
        background: rgba(200, 200, 200, 0.2);
        padding: 0 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .swiperbaseBox{
            height: 280rpx;
            width: 100%;

        }
    }
    

}